<template>
  <div :class="{ min: min ? true : false }">
    <a-row class="printMe-top">
      <a-col :span="8">
        <div class="top a">
          <a-image width="150" :src="image" />
          <div>
            <span>流程卡号：{{ props.data.code }}</span>
            <span
              >创建时间:
              {{ `${dayjs(props.data?.createdAt).format('YYYY-MM-DD')}` }}</span
            >
          </div>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="top b">
          <p>生产工序流转卡</p>
        </div>
      </a-col>
      <a-col :span="8">
        <div class="top c">
          <qrcode-vue
            :value="String(props.data.id)"
            :size="100"
            level="H"
          ></qrcode-vue>
        </div>
      </a-col>
    </a-row>
    <a-row class="printMe-cn">
      <a-col :span="6">
        <div class="text">
          <span>计划工单编码：{{ props.data?.produceTask?.code }}</span>
          <span>
            产品编号:
            {{
              props.data?.produceTask?.planModel?.workOrderModel?.product
                ?.managementNumber
            }}
          </span>
          <span>
            生产单位:
            {{
              props.data?.produceTask?.planModel?.workOrderModel?.product?.unit
            }}
          </span>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="text">
          <span>
            生产工单编码：
            {{ props.data?.produceTask?.planModel?.workOrderModel?.workCode }}
          </span>
          <span>
            产品名称:
            {{
              props.data?.produceTask?.planModel?.workOrderModel?.product
                ?.managementName
            }}
          </span>
          <span>生产数量: {{ props.data?.produceTask?.planTaskNumber }}</span>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="text">
          <span>生产批次号：{{ props.data?.produceTask?.batchCode }}</span>
          <span>
            规模型号:
            {{
              props.data?.produceTask?.planModel?.workOrderModel?.product
                ?.managementSpec
            }}
          </span>
          <span>
            工艺路线:
            {{
              props.data?.produceTask?.planModel?.workOrderModel?.product
                ?.productModel?.routerName
            }}
          </span>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="text">
          <span>生产任务编号: {{ props.data?.produceTask?.code }}</span>
          <span>
            生产BOM:
            {{
              props.data?.produceTask?.planModel?.workOrderModel?.product
                ?.bomName
            }}
          </span>
          <span>
            计划人:
            {{
              props.data?.produceTask?.planModel?.workOrderModel?.plannerName
            }}
          </span>
        </div>
      </a-col>
    </a-row>
    <div style="border-left: 1px solid #e5e6eb; border-top: 1px solid #e5e6eb">
      <a-table
        :bordered="{
          wrapper: true,
          cell: true,
          headerCell: true,
          bodyCell: true
        }"
        :columns="columns"
        :data="tableDate"
        :pagination="false"
      >
        <template #custom>
          <a-space size="large">
            <a-checkbox disabled>OK</a-checkbox>
            <a-checkbox disabled>NG</a-checkbox>
          </a-space>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, onMounted, ref } from 'vue';
  import dayjs from 'dayjs';
  import QrcodeVue from 'qrcode.vue';
  import { GetflowCardlogoDef } from '@/api/equipment-management/base-setting/index';
  import logo from '../../../../../../assets/logo-blue.png';
  //  " /src/assets/logo-blue.png'"
  const props = withDefaults(
    defineProps<{
      data?: any;
      columns: any[];
      tableDate: any[];
      min?: any;
    }>(),
    {
      min: false
    }
  );
  const style = reactive({ data: {} });
  const image = ref(logo);
  onMounted(async () => {
    const res = await GetflowCardlogoDef();
    image.value = res.url || logo;
  });
</script>

<style lang="less" scoped>
  .printMe-top {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .top {
      display: flex;
      p {
        margin: 0;
        padding: 0;
        font-size: 20px;
      }
    }
    .a {
      flex-direction: column;
      align-items: start;
      div {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        span {
          margin-top: 10px;
        }
      }
    }
    .b {
      justify-content: center;
    }
    .c {
      justify-content: end;
    }
    .printMe-cn {
      margin-bottom: 20px;
    }
  }
  .text {
    display: flex;
    flex-direction: column;
    span {
      margin-bottom: 10px;
    }
  }
  .min {
    transform: scale(0.2);
  }
</style>
